<template>
  <div class="font-color-6 font-12 breadcrumb-bar mar-t-13 mar-b-13">
    <el-breadcrumb class="breadcrumb flex v-align-c" separator="">
      <div class="pad-r-7">您所在的位置：</div>
      <el-icon color="#bbbbbb" :size="14" class="mar-r-5">
        <arrow-right />
      </el-icon>
      <el-breadcrumb-item :to="{ path: '/' }" class="mar-r-15">首页</el-breadcrumb-item>
      <el-icon color="#bbbbbb" :size="14" class="mar-r-5">
        <arrow-right />
      </el-icon>
      <el-breadcrumb-item class="mar-r-15">{{ lastName }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
export default defineComponent({
  name: 'Breadcrumb',
  components: {
    ArrowRight
  },
  props: {
    lastName: {
      type: String,
      default: () => ('')
    }
  },
  setup() {
    onMounted(() => {
    })

    // const categorySelect = (index:number) => {
    //   categoryList.value[index].show = true
    // }

    return {
    }
  }
})
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  .breadcrumb-bar{
    ::v-deep(.breadcrumb){
      &.el-breadcrumb{
        font-size: 12px;
      }
      .el-breadcrumb__separator{
        display: none;
      }
      .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
        color: #666;
        font-weight: normal;
      }
      .el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover{
        color: #666;
      }
      .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
        color: #666;
      }
    }
  }
</style>
